<template>
    <view class="agreement-modal" v-if="isShow">
        <view class="modal-body">
            <view class="title">用户协议与隐私协议</view>
            <view class="content">
                欢迎使用蔚蓝至善APP，在您使用前请仔细阅读
                <navigator url="/pagesA/login/agreenment?type=2" hover-class="navigator-hover">《用户服务协议》</navigator>和
                <navigator url="/pagesA/login/agreenment?type=1" hover-class="navigator-hover">《隐私协议》</navigator>，
                您点击“同意”按钮，即表示您已阅读并同意以上条款。蔚蓝至善将全力保障您的合法权益与信息安全，并为您提供优质服务。
            </view>
            <view class="btn">
                <div class="button" @click="nonuse">不同意并直接退出APP</div>
                <div class="button" @click="agree">同意</div>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "first-agreenment",
    data() {
        return {
            isShow: false
        };
    },
    created() {
        if (uni.getStorageSync('first') != 1) {
            this.isShow = true;
        }
    },
    methods: {
        nonuse() {
            switch (uni.getSystemInfoSync().platform) {
                case 'android':
                    plus.runtime.quit();
                    break;
                case 'ios':
                    plus.ios.import('UIApplication').sharedApplication().performSelector('exit');
                    break;
            }
        },
        agree() {
            uni.setStorageSync('first', 1);
            this.isShow = false;
            uni.showTabBar();
        }
    }
}
</script>

<style lang="scss">
.agreement-modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba($color: #000000, $alpha: 0.5);

    .modal-body {
        width: 650rpx;
        position: fixed;
        height: auto;
        background: #fff;
        border-radius: 20rpx;
        top: 35%;
        left: 50rpx;
        padding: 0;
        box-shadow: 0 0 10rpx 2rpx #666;

        .title {
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            font-size: 32rpx;
            padding-top: 20rpx;
        }

        .content {
            padding: 20rpx 40rpx;
            line-height: 56rpx;
            font-size: 28rpx;
            color: #666;
            border-bottom: #eee 1px solid;

            uni-navigator {
                display: inline-block;
                color: #007aff;
            }
        }

        .btn {
            display: flex;
            .button {
                width: 50%;
                border-left: #eee 1px solid;
                height: 100rpx;
                line-height: 100rpx;
                font-size: 24rpx;
                background: none;
                display: inline-block;
                white-space: nowrap;
                border-radius: 0;
                text-align: center;
                &:first-child {
                    color: #999;
                    border-left: none;
                }

                &:last-child {
                    color: #007aff;
                }
            }
        }
    }
}
</style>
